<template>
	<view class="content">
		<view class="top-price">
			<view class="price-cz">
				<view class="left">
					<view>可提现</view>
					<view class="price-box">
						<view class="price">{{resultDetail.usable_total}}</view>
						<view class="tixian"  style="padding: 0 15upx;" @click="$Router.push('/pages/prefile/my-balance/tixian/tixian')">提现</view>
						<view class="tixian" style="padding: 0 15upx;" @click="coverBalance">转化成余额</view>
					</view>
				</view>
				<view class="right-tuiguang" @click="$Router.push('/pages/prefile/my-extension/my-promotion-order/my-promotion-order')">
					<image src="../../../static/images/prefile/fasong.png" style="width: 37upx; height: 31upx;"></image>
					<text>推广</text>
				</view>
			</view>
		</view>
		<view class="group-price-box">
			<view class="gorup-price-item">
				<view class="price-tips">今日收入</view>
				<view class="price">{{resultDetail.today_income}}</view>
			</view>
			<view class="line"></view>
			<view class="gorup-price-item">
				<view class="price-tips">今日订单</view>
				<view class="price">{{resultDetail.today_order}}</view>
			</view>
			<view class="line"></view>
			<view class="gorup-price-item">
				<view class="price-tips">新增团员</view>
				<view class="price">{{resultDetail.today_user_total}}</view>
			</view>
			<view style="position: absolute;width: 672upx;height: 1upx;background: #EEEEEE; left: 15upx;"></view>
			<view class="gorup-price-item">
				<view class="price-tips">待结算收入</view>
				<view class="price">{{resultDetail.settled}}</view>
			</view>
			<view class="line"></view>
			<view class="gorup-price-item">
				<view class="price-tips">累计收入</view>
				<view class="price">{{resultDetail.grand_total}}</view>
			</view>
			<view class="line"></view>
			<view class="gorup-price-item">
				<view class="price-tips">我的团队</view>
				<view class="price">{{resultDetail.user_total}}</view>
			</view>
		</view>
		<view style="padding: 0 30upx;" v-if="userInfo.levelName == '合伙人'">
			<u-cell-group >
				<u-cell-item  title="合伙人分红" @click="$Router.push('/pages/prefile/my-extension/fenhong-histry/fenhong-histry')"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="extension-box">
			<view class="extension-tips" @click="$Router.push('/pages/prefile/my-extension/my-promotion-order/my-promotion-order')">
				<view class="tips-left">
					<image src="../../../static/images/prefile/gongn.png" style="width: 36upx; height: 32upx;"></image>
					<text style="font-size: 28upx; font-weight: bold;">推广订单</text>
				</view>
				<view class="tips-right">
					<image src="../../../static/images/index/loding.png"></image>
				</view>
			</view>
			<view class="extension-list">
				<view class="extension-item" v-for="(item, index) in resultList" :key="index">
					<view class="order-sn">
						<view class="left-sn">订单号：{{item.order_sn}}</view>
						<view class="right-status">{{item.status | statusFeilt}}</view>
					</view>
					<view
						style="width: 700upx;height: 1upx;background: #EEEEEE; margin: 0 auto; margin-top: 20upx;">
					</view>
					<view class="user-info">
						<view class="detail-left">
							<image :src="item.avatar"
								style="width: 76upx;height: 76upx;border-radius: 50%"></image>
							<view class="detail-no">
								<view class="">{{item.nickname}}</view>
								<view class="time">{{item.created_at}}</view>
							</view>
						</view>
						<view class="price">收入￥{{item.commission}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				resultDetail: {},
				resultList: [],
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getTuiguanIndex();
			this.getTuiguanList();
		},
		computed: {
			...mapState(['userInfo'])
		},
		filters: {
			statusFeilt(status) {
				let statusText;
				// -1 无效佣金 0预计佣金 1未结算  2已结算
				switch (status) {
					case -1:
						statusText = '无效佣金'
						break;
					case 0:
						statusText = '预计佣金'
						break;
					case 1:
						statusText = '未结算'
						break;
					case 2:
						statusText = '已结算'
						break;
				}
				return statusText;
			}
		},
		methods:{
			coverBalance(){
				this.$http.get('user.convarBlance').then(res => {
					this.getTuiguanIndex();
					this.getTuiguanList();
				})
			},
			// 获取推广首页信息
			getTuiguanIndex(){
				this.$http.get('user.tuiguanIndex').then(res => {
					this.resultDetail = res.data;
				})
			},
			getTuiguanList(){
				this.$http.get('user.tuiguanList').then(res => {
					this.resultList = res.data.data;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		.top-price{
			background-color: #FF7341;
			min-height: 380upx;
			.price-cz{
				color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 37upx;
				.price-box{
					display: flex;
					align-items: center;
					.price{
						font-size: 44upx;
					}
					.tixian{
						// width: 103upx;
						height: 45upx;
						background: #FFFFFF;
						opacity: 0.3;
						border-radius: 23upx;
						color: #3F536E;
						text-align: center;
						line-height: 45upx;
						margin-left: 60upx;
					}
				}
				.right-tuiguang{
					width: 150upx;
					height: 60upx;
					background: #FFFFFF;
					opacity: 0.81;
					border-radius: 27upx 0 0 27upx;
					line-height: 60upx;
					padding-left: 15upx;
					color: #FF7341;
					text{
						margin-left: 15upx;
					}
				}
			}
		}
		.group-price-box{
			width: 700upx;
			height: 306upx;
			background: #FFFFFF;
			box-shadow: 0px 0px 7upx 1px rgba(177, 176, 176, 0.21);
			border-radius: 10upx;
			margin: 0 auto;
			margin-top: -250upx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			position: relative;
			.gorup-price-item{
				width: 33%;
				text-align: center;
				border-bottom: #EEEEEE;
				.price-tips{
					font-size: 22upx;
					color: #737373;
					
				}
				.price{
					font-size: 30upx;
					color: #151515;
					margin-top: 5upx;
					font-weight: bold;
				}
			}
			.line{
				width: 1upx;
				height: 50upx;
				background: #EEEEEE;
			}
		}
		
		.extension-box{
			margin-top: 45upx;
			.extension-tips{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 26upx;
				.tips-left{
					image{
						width: 36upx;
						height: 32upx;
						margin-right: 12upx;
						vertical-align: middle;
					}
				}
				.tips-right{
					image{
						width: 12upx;
						height: 22upx;
					}
				}
			}
		}
		
		.extension-list{
			margin-top: 50upx;
			.extension-item{
				border-bottom: 15upx solid #EEEEEE;
				padding-bottom: 30upx;
				.order-sn{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 41upx;
					font-size: 25upx;
					.right-status{
						font-size: 27upx;
						color: #FF5E25;
					}
				}
				.user-info{
					margin-top: 14upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 43upx;
					.detail-left{
						display: flex;
						align-items: center;
						.detail-no{
							margin-left: 20upx;
							font-size: 27upx;
							.time{
								color: #AFAFAF;
								font-size: 22upx;
							}
						}
					}
					.price{
						color: #FF5E25;
						font-size: 27upx;
					}
				}
			}
		}
	}
</style>
